<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .options li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: solid 1px #ddd;
        }

        .items li {
            width: 405px;
            height: 405px;
            display: none;
            border: solid 1px #ddd;
        }
    </style>
</head>

<body>
    <!-- 
        请补全JavaScript代码，实现效果如下：
        1. 当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为'#25bb9b'，其它栏目背景色位'#fff'。
        2. 当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素
        注意：
        1. 必须使用DOM0级标准事件（onclick）
        2. 已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素
    -->
    <ul class='options'>
        <li data-type="0" style='background-color: #25bb9b;'>题库</li>
        <li data-type="1">面试</li>
        <li data-type="2">学习</li>
        <li data-type="3">求职</li>
    </ul>
    <ul class='items'>
        <li style="display: block;">牛客题库，包含编程题、选择题等</li>
        <li>为你的面试提供一站式服务</li>
        <li>校招学习来牛客</li>
        <li>求职中有什么难题，可以联系我们</li>
    </ul>

    <script>
        var options = document.querySelector('.options');
        var optionItems = [].slice.call(document.querySelectorAll('.options li'));
        var items = [].slice.call(document.querySelectorAll('.items li'));
        // 补全代码
        // optionItems.forEach((item, index) => {
        //     item.onclick = () => {
        //         item.style.backgroundColor = "rgb(37, 187, 155)";
        //         indexDom = index
        //         for (let i = 0; i < items.length; i++) {
        //             if (i !== index) {
        //                 optionItems[i].style.backgroundColor = '#fff'
        //                 items[i].style.display = 'none'
        //             } else {
        //                 items[i].style.display = 'block'
        //             }
        //         }
        //     }
        // })
        options.onclick = (e) => {
            for (let i in optionItems) {
                if (e.target === optionItems[i]) {
                    optionItems[i].style.backgroundColor = 'rgb(37, 187, 155)'
                    items[i].style.display = 'block'
                } else {
                    optionItems[i].style.backgroundColor = '#fff'
                    items[i].style.display = 'none'
                }
            }
        }
    </script>
</body>

</html>